<template>
  <main>
    <!--        <message message="hello wold fff">-->
    <!--          dsds-->
    <!--        </message>-->
    <h1>VKButton</h1>
    <VKButton type="primary" ref="buttonRef">button test</VKButton>
    <VKButton type="success">success test</VKButton>
    <VKButton type="success" plain>success test</VKButton>
    <VKButton>success test</VKButton>
    <VKButton @click="openPopup">popup test</VKButton>
    <div class="line">===========================</div>
    <h1>Collapse</h1>
    openedValue:{{ openedValue }}
    <Collapse v-model="openedValue">
      <CollapseItem name="1" title="Title One">
        <h1>headline title one</h1>
        <div>this is conent one</div>
      </CollapseItem>
      <collapse-item name="2" title="Tile two">
        <div>this is content two</div>
      </collapse-item>
    </Collapse>
    <div class="line">===========================</div>
    <h1>Form</h1>
    <VKForm :model="model" :rules="rules">
      <FormItem label="email" prop="email">
        <Input v-model="model.email"/>
      </FormItem>
      <FormItem label="password" prop="password">
        <Input v-model="model.password"/>
      </FormItem>
    </VKForm>
    <div class="line">===========================</div>
    <h1>Icon</h1>
    <Icon icon="arrow-up" type="danger" color="blue"></Icon>
    <div class="line">===========================</div>
    <h1>input</h1>
    <Input v-model="inputValue"/>
    <div class="line">===========================</div>
    <h1>Switch</h1>
    <Switch v-model="switchCheck" active-text="是" inactive-text="否" @change="switchChange"></Switch>
  </main>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import VKButton from './components/VKButton/VKButton.vue'
import type {ButtonInstance} from './components/VKButton/types'
import Collapse from './components/Collapse/Collapse.vue'
import CollapseItem from './components/Collapse/CollapseItem.vue'
import Icon from "@/components/Icons/Icon.vue";
import Input from "@/components/Input/Input.vue";
import Switch from "@/components/Switch/Switch.vue";
import VKForm from "@/components/Form/Form.vue";
import FormItem from "@/components/Form/FormItem.vue";
import popup from '@/components/popup/popup'
import version from '@/components/VersionSetting/VersionSetting'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import Message from "@/components/Message/Message.vue";
import {createMessage} from "@/components/Message/method";

const model = reactive({
    email: '',
    password: ''
  })
const rules = {
  email: [{ type: 'email', required: true, trigger: 'blur' } ],
  password: [{ type: 'string', required: true, trigger: 'blur', min: 3, max: 5 }],
}

const switchCheck = ref(true)
const switchChange = (e) => {
  console.log('eeeeeeee:', e)
}


const inputValue = ref('vicky')
const buttonRef = ref<ButtonInstance | null>(null)
onMounted(() => {
  // if (buttonRef.value) {
  // console.log('buttonRef:',buttonRef.value?.ref)
  // }
  createMessage({message: 'hello world ss', duration: 500})
  createMessage({message: 'hello world ss dd', duration: 0})
  createMessage({message: 'hello world agin', duration: 1000})
})
const openedValue = ref(['1', '2'])

const openPopup = () => {
  popup({
    title: 'version setting',
    height: '280',
    content(elem) {
      version({
        elem
      })
      console.log('elem:', elem)
    }
  })
}
</script>

<style scoped>
.line {
  margin: 18px 0 58px;
}

header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
